<template>
  <el-table :data="bannerArr">
    <el-table-column type="index" label="编号"></el-table-column>
    <el-table-column label="轮播图">
      <template #default="scope">
      <img :src="scope.row.imgUrl" style="width: 300px">
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="danger" @click="del(scope.$index,scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";

const bannerArr=ref([])
onMounted(()=>{
  axios.get(BASE_URL+'/v1/banners')
    .then((response)=>{
      bannerArr.value=response.data.data;
    })
})

const del=(i,b)=>{
  if (confirm("你确认删除此轮播图吗")){
    axios.post(BASE_URL+'/v1/banners/'+b.id+'/detele')
      .then((response)=>{
        if (response.data.code==1){
          ElMessage.success("删除成功")
          bannerArr.value.splice(i,1)
        }
      })
  }
}


</script>

<style scoped>

</style>